<template>
  <div class="dgcont-new">
    <div class="header">
      <div class="title">高点设备列表</div>
      <div class="close" @click="emit('close')">X</div>
    </div>
    <div class="search-content">
      <img class="img" @click="search" src="/images/new/searchbtn.png" />
      <div class="searchbg">
        <el-input v-model="keyword" placeholder="请输入搜索关键词" />
      </div>
    </div>
    <div class="content">
      <div class="label-title">选择设备</div>
      <div class="list-point">
        <div
          class="item-list"
          :class="{ active: props.vid === item.cameraId }"
          v-for="(item, index) in highlist"
          :key="index"
          @click="selectHigh(item)"
        >
          {{ item.cameraName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  vid: String,
});
const emit = defineEmits(["gd"]);
let highlist = ref([]);
let catchList = [];
let keyword = ref("");
const getData = () => {
  useApi.post("/dynamicview/ar/highandlows", {}).then((res) => {
    highlist.value = res.data.highList;
    catchList = res.data.highList;
  });
};

const search = () => {
  if (keyword.value) {
    highlist.value = catchList.filter((item) =>
      item.cameraName.includes(keyword.value)
    );
  } else {
    highlist.value = catchList;
  }
};

const selectHigh = (item) => {
  emit("gd", item);
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" >
.dgcont-new {
  width: 450px;
  height: 492px;
  background: url("/images/new/gdbg.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 322px;
  bottom: 350px;
  .search-content {
    display: flex;
    align-items: center;
    padding: 20px 30px 0 30px;
    .img {
      width: 87px;
      height: 55px;
      cursor: pointer;
    }
    .searchbg {
      width: 250px;
      height: 55px;
      background: url("/images/new/searchbg.png") no-repeat;
      background-size: 100% 100%;
      .el-input {
        width: 100%;
        height: 100%;
        background: transparent !important;
        .el-input__wrapper {
          background: transparent !important;
        }
        .el-input__inner {
          background: transparent !important;
          color: #fff !important;
          font-size: 18px;
          color: #b0d9ff;
          padding-left: 8px;
          &::placeholder {
            color: #b0d9ff;
          }
        }
      }
    }
  }
  .header {
    width: 100%;
    height: 50px;
    position: relative;
    .title {
      padding-left: 33px;
      font-family: YouSheBiaoTiHei;
      font-size: 28px;
      color: #ffffff;
      line-height: 50px;
    }

    .close {
      width: 40px;
      height: 40px;
      position: absolute;
      right: 32px;
      top: 20.5px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 30px;
      cursor: pointer;
    }
  }

  .content {
    margin-top: 20px;
    width: 100%;
    height: 550px;
    overflow: auto;
    padding: 0 40px;
    .label-title {
      width: 100%;
      height: 30px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 21px;
      color: #ffffff;
      line-height: 30px;
      letter-spacing: 1.5px;
      padding-left: 15px;
      position: relative;
      &::before {
        content: "";
        width: 5px;
        height: 24px;
        background: #3eeeff;
        position: absolute;
        left: 0;
        top: 3px;
      }
    }
    .list-point {
      margin-top: 9px;
      width: 100%;
      height: 280px;
      overflow: auto;
      .item-list {
        width: 100%;
        height: 40px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 21px;
        color: #ffffff;
        line-height: 40px;
        cursor: pointer;
        padding-left: 14px;
        &.active {
          text-shadow: 0px 2px 15px rgb(0, 0, 0);
          // color: #ffffff;
          background: linear-gradient(90deg, #79e4ff 0%, #3fa3ff 100%);
        }
      }
    }
  }
}
</style>
